<template>
    <el-form :model="apiForm" label-width="130px" class="api-setting">
        <el-form-item label="是否开启API安全">
            <div style="display: flex;flex-direction: column;">
                <el-radio-group v-model="apiForm.enable_api_security">
                    <el-radio :label="0">关闭</el-radio>
                    <el-radio :label="1">开启</el-radio>
                </el-radio-group>
                <div class="api-tip">api安全功能开启之后调用前端api需要传输签名</div>
            </div>

        </el-form-item>

        <el-form-item label="秘钥">
            <div style="display: flex;flex-direction: column;">

                <el-input v-model="apiForm.secret_key" placeholder="请输入秘钥" style="width: 400px;"></el-input>
                <div class="key-tip">秘钥设置关系系统中api调用传输签名的编码规则，以及会员token解析，请慎重设置，注意设置之后对应会员要求重新登录获取token</div>
            </div>
        </el-form-item>

        <el-form-item>
            <el-button color="var(--primary-theme-color)" size="small" type="primary"
                @click="saveSettings">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive } from 'vue'
import useElementPlus from "@/hooks/useElementPlus"

const { message } = useElementPlus()

const apiForm = reactive({
    enable_api_security: 1,
    secret_key: '122232133239'
})

const saveSettings = () => {
    // 实现保存设置的逻辑
    message({
        message: "保存成功",
        type: "success"
    })
}
</script>

<style lang="scss" scoped>
.api-setting {
    padding: 20px 0;

    .api-tip {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }

    .key-tip {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
        line-height: 1.5;
        max-width: 600px;
    }

    .el-button {
        margin-top: 10px;
    }
}
</style>
